<script setup lang="ts">
defineOptions({
  name: "MACHINE_CONSUMABLEITEMSLIFECYCLE_FILTER_BAG_GHVAC"
});

import { ref, nextTick, onMounted } from "vue";
import consumableItems from "../components/consumableItems.vue";
import detailInfo from "../components/detailInfo.vue";
import detailListInfo from "../components/detailListInfo.vue";
// import tabItem from "../components/tabItem.vue";
import tabItemDetail from "../components/tabItemDetail.vue";
import ghvacTableList from "../components/ghvacTableList.vue";
import { queryConsumableDetailList, queryEquipmentConsumableQuantity } from "@/api/modules/machine";
import { getTableData } from "@/api/system/positionManage";
import { useRouterStoreHook } from "@/store/modules/router";
import dayjs from "dayjs";
import isToday from "dayjs/plugin/isToday";

dayjs.extend(isToday);

const routeStore = useRouterStoreHook();
// const detailInfoRef = ref<InstanceType<typeof detailInfo> | null>(null);
const detailListInfoRef = ref<InstanceType<typeof detailInfo> | null>(null);
const detailInfoLoading = ref<boolean>(false);
const detailListInfoLoading = ref<boolean>(false);
const typeId_ = ref<string>("");
// const isShowHistory = ref(false);
// const inspectArea = ref("");
const areaOpt = ref([]);

const positionCodesList = ref<any>([]);
const cascaderRef = ref();
// const position = ref("");
const tabItemRef = ref<any>(null);
const storageData = ref<any>({});
const currentType = ref<any>({});
const filterStatus = ref(""); // 过滤器状态
const filterStatusList = [
  { label: "临期", value: "outdated" },
  { label: "失效", value: "invalid" },
  { label: "健康", value: "health" }
];
const devTypes = ref([]); // 空调类型 默认全选
const devTypeList = [
  { label: "NMAU", value: "NMAU" },
  { label: "AHU", value: "AHU" }
];

const cascaderProps = {
  children: "children",
  label: "name",
  value: "id",
  checkStrictly: true
};
// 暂时按钮被关闭不显示
const typeIdChangeHandler = async (typeId: string) => {
  typeId_.value = typeId;
  detailInfoLoading.value = true;
  detailListInfoLoading.value = true;
  const className = routeStore.getSubject;
  const params = { typeId, className };
  let res: any = await queryConsumableDetailList(params, () => {
    detailInfoLoading.value = false;
    detailListInfoLoading.value = false;
  });
  // detailInfoRef.value.initData(res.ffuList);
  detailInfoLoading.value = false;
  detailListInfoRef.value.initData(res.ffuList);
  detailListInfoLoading.value = false;
};

// 查询设备数据
const fetchData = async (devTypes: any) => {
  const className = routeStore.getSubject;
  // 公司 写死 593
  const typeId_ = "593";
  // 厂内 写死 584
  // const typeId_ = "584";
  const queryDateStart = "";
  const queryDateEnd = "";
  const params = { className, devTypes: devTypes.length <= 0 ? ["NMAU", "AHU"] : devTypes, typeId: typeId_, queryDateStart, queryDateEnd };
  const res = await queryEquipmentConsumableQuantity(params, () => {
    // loading.value = false;
  });
  // tabItemRef.value.initData(res, devType);
  return { data: res };
};

// 查询设备table list 数据
// const fetchList = async (typeId?: any, current: any) => {
//   typeId_.value = typeId;
//   detailInfoLoading.value = true;
//   const className = routeStore.getSubject;
//   const params = { typeId, className, devTypes: current.type, type: current.name, area: inspectArea.value };
//   let res: any = await queryConsumableDetailList(params, () => {
//     detailInfoLoading.value = false;
//   });
//   const filterDatas = res.ffuList.filter(item => item.ffuName == current.typeName);
//   detailInfoRef.value.initData(res.ffuList, current.type);
//   detailInfoLoading.value = false;
//   detailListInfoRef.value.initData(res.ffuList, current.type);
// };

const submitHandler = async () => {
  await nextTick();
  await typeIdChangeHandler(typeId_.value);
};

// const showHistory = () => {
//   isShowHistory.value = true;
// };
// const hideHistory = () => {
//   isShowHistory.value = false;
// };

// 获取巡检区域
// const focusPositionCodes = async () => {
//   const data = await getTableData({ facCode: "" });
//   positionCodesList.value = data || [];
// };

// 巡检区域改变
// const changeCheckArea = val => {
//   inspectArea.value = val && val.length > 0 ? val[val.length - 1] : "";
//   cascaderRef.value.togglePopperVisible();
// };

// 切换设备
// const handleChangeCurrent = (item: any) => {
//   currentType.value = item;
//   fetchList("", item);
// };

// 获取库存数据
const initStorageData = (values: any) => {
  if (values.length) {
    values.map(item => {
      storageData.value[item.type] = item.data.filterStorageByType;
    });
  }
};

const handleSearch = () => {
  getData();
};
const handleReset = () => {
  getTreeData();
  // inspectArea.value = "";
  // position.value = "";
  devTypes.value = [];
  filterStatus.value = "";
  getData();
};
// 查询设备table list 数据
const fetchTableList = async (typeId: any, devTypes: any) => {
  typeId_.value = typeId;
  detailInfoLoading.value = true;
  const className = routeStore.getSubject;
  // const params = { typeId, className, devType: current.type, type: current.name, position: position.value, area: inspectArea.value };
  const curAreaCode = areaOpt.value[2] ? areaOpt.value[2].id : areaOpt.value[1] ? areaOpt.value[1].id : areaOpt.value[0] ? areaOpt.value[0].id : "";
  const params = { typeId, className, devTypes: devTypes.length <= 0 ? ["NMAU", "AHU"] : devTypes, areaCode: curAreaCode };
  let res = await queryConsumableDetailList(params, () => {
    detailInfoLoading.value = false;
  });
  return { data: res };
};

// 过滤器类型筛选数据
const filterFFUList = (list: any[]): any[] => {
  let res = list;
  switch (filterStatus.value) {
    case "outdated":
      res = res
        .map(e => {
          e.filters = e.filters.filter(child => child.outdated && !child.invalid);
          return e;
        })
        .filter(e => e.filters.length > 0);
      break;
    case "invalid":
      res = res
        .map(e => {
          e.filters = e.filters.filter(child => child.invalid);
          return e;
        })
        .filter(e => e.filters.length > 0);
      break;
    case "health":
      res = res
        .map(e => {
          e.filters = e.filters.filter(child => !child.invalid && !child.outdated);
          return e;
        })
        .filter(e => e.filters.length > 0);
      break;
    default:
      break;
  }

  return res;
};
// 新的查询内容
const getData = async () => {
  detailInfoLoading.value = true;
  const res: any = await fetchTableList("", devTypes.value);
  const ffuListData = filterFFUList([...res?.data?.ffuList]);
  console.log(`output->ffuListData`, ffuListData);
  // detailInfoRef.value.initData(ffuListData);
  detailInfoLoading.value = false;
  detailListInfoRef.value.initData(ffuListData);
};

const mergeTreeData = ref<any>([]);
// 获取巡检区域
const getTreeData = async () => {
  areaOpt.value = [];
  mergeTreeData.value = [];
  const data: any = await getTableData({ facCode: "" });
  let list: any[] = data || [];
  mergeTreeData.value[0] = list;
};

const getTreelevel = (value: any, lv: number) => {
  areaOpt.value[lv] = void 0;
  areaOpt.value[lv + 1] = void 0;
  mergeTreeData.value[lv] = value.children || [];
  mergeTreeData.value[lv + 1] = [];
};
onMounted(async () => {
  getTreeData();
  const res = await fetchData(devTypes.value);
  initStorageData(res);
  getData();
});
</script>

<template>
  <div class="common_list_container">
    <ghvacTableList ref="detailListInfoRef" :storageData="storageData" @submit="submitHandler" />
  </div>
</template>

<style lang="scss" scoped>
.common_list_container {
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;

  .common_page {
    height: 33px;
    padding: 0 !important;
    margin-top: 25px;
    margin-bottom: 0;
  }
}

:deep(.px-table .px-table__header-wrapper th, .px-table .px-table__fixed-header-wrapper th) {
  font-size: 14px !important;
}
</style>
